<template>
  <div class="container">
    <div class="tab" v-for="tab in tabs">

      <div @click="onTabClick(tab.index)">
        <img :src="getPic(tab)">
        <span :style="tab.index === selected ? 'color: #1286F7;' : 'color: #999999;'">{{ tab.name }}</span>
      </div>
    </div>
  </div>
</template>
<script>

import EnterpriseCourseAPI from '../../repo/api/EnterpriseCourseAPI'

export default {
  name: 'TabBar',
  props: ['selected'],
  data () {
    return {
      show: false,
      tabUrl: ''
    }
  },
  created () {
    EnterpriseCourseAPI.getHuidaoUrl().then((result) => {
      this.tabUrl = result.responseData.tabUrl
    })
  },

  computed: {
    tabs () {
      return [this.data.home, this.data.university, this.data.huidao, this.data.me]
    },
    data () {
      return {
        home: {index: 0, pic: 'home', name: '首页', routePath: '/tab/home'},
        university: {index: 1, pic: 'university', name: '数据', routePath: '/tab/university'},
        huidao: {index: 2, pic: 'huidao', name: '会道', routePath: '/tab/huidao'},
        me: {index: 3, pic: 'me', name: '我的', routePath: '/tab/me'},
      }
    },
  },
  mounted () {
    window['onJsLinkHuiDao'] = (jsonStr) => {
      this.onJsLinkHuiDao(jsonStr)
    }
  },
  methods: {
    getPic (tab) {
      if (this.selected === tab.index) {
        return `/web-hft-ee/static/img/m/tab_${tab.pic}_blue.png`
      } else {
        return `/web-hft-ee/static/img/m/tab_${tab.pic}_gray.png`
      }
    },
    onJsLinkHuiDao (data) {
      console.log('callback success', data)
    },
    onTabClick (tab) {
      if (tab === 2) {
        let jumpUrl = this.tabUrl + '&referrer=' + encodeURIComponent(window.location.href)
        console.log(window.hasOwnProperty('zshft'))
        if (window.hasOwnProperty('zshft')) {
          window.zshft.onJsLinkHuiDao(jumpUrl.toString())
        }
        return
      }

      let item = this.tabs[tab]
      if (tab === this.selected) return
      this.$_router.push(item.routePath)
      this.$emit('selectTab', {tab: tab})

    },
  }
}
</script>
<style scoped>
.container {
  z-index: 1000;
  background: white;
  border-top: 1px #FFFFFF solid;
  position: fixed;
  width: 100vw;
  display: flex;
  height: 50px;
  bottom: 0;
  font-size: 10px;
}

img {
  width: 24px;
  height: 24px;
  margin-top: 8px;
}

span {
  color: #999999;
}

.tab {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  justify-content: center;
}

.router-link-active span {
  color: #1286F7;
}

.tab > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

</style>
